JavaScript obrasci dizajna: Implementacije Singletona, Observera i Factoryja

Obrasci dizajna (eng. design patterns) su ponovno iskoristiva rješenja za uobičajene probleme u dizajnu softvera. Oni predstavljaju najbolje prakse naučene tijekom vremena i mogu značajno poboljšati strukturu, održivost i skalabilnost vaših JavaScript aplikacija. Ovaj članak istražuje tri temeljna obrasca dizajna: Singleton, Observer i Factory, pružajući praktične implementacije i primjere iz stvarnog svijeta.

Razumijevanje obrazaca dizajna

Prije nego što zaronimo u specifične obrasce, važno je razumjeti zašto su obrasci dizajna vrijedni. Oni nude nekoliko prednosti:

• Ponovna iskoristivost: Obrasci dizajna su isprobana i testirana rješenja koja se mogu primijeniti na različite probleme.
• Održivost: Slijedeći utvrđene obrasce, kod postaje organiziraniji i predvidljiviji, što ga čini lakšim za razumijevanje i modificiranje.
• Skalabilnost: Obrasci dizajna mogu vam pomoći strukturirati aplikaciju na način koji joj omogućuje rast i razvoj bez da postane nepregledna.
• Komunikacija: Korištenje obrazaca dizajna pruža zajednički rječnik za programere, olakšavajući komunikaciju o dizajnerskim idejama i učinkovitu suradnju.

Singleton obrazac

Singleton obrazac osigurava da klasa ima samo jednu instancu i pruža globalnu točku pristupa toj instanci. Ovo je korisno kada trebate kontrolirati stvaranje određenog resursa i osigurati da se samo jedna instanca koristi u cijeloj aplikaciji. Zamislite ga kao globalni konfiguracijski objekt ili skup veza s bazom podataka.

Implementacija

Ovdje je osnovna JavaScript implementacija Singleton obrasca:

            
let instance = null;

class Singleton {
  constructor() {
    if (!instance) {
      instance = this;
    }
    return instance;
  }

  static getInstance() {
    if (!instance) {
      instance = new Singleton();
    }
    return instance;
  }

  // Add your methods and properties here
  getData() {
    return "Singleton data";
  }
}

// Example Usage
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();

console.log(singleton1 === singleton2); // Output: true
console.log(singleton1.getData()); // Output: Singleton data

            

              
                Copy
              
            
          

Objašnjenje:

• Varijabla instance čuva jedinu instancu klase.
• Konstruktor provjerava postoji li već instanca. Ako postoji, vraća postojeću instancu; u suprotnom, stvara novu.
• Metoda getInstance() pruža globalnu točku pristupa instanci.

Primjeri iz stvarnog svijeta

• Upravljanje konfiguracijom: Singleton može pohraniti konfiguracijske postavke za cijelu aplikaciju, osiguravajući dosljedan pristup u različitim modulima. Zamislite aplikaciju koja treba čitati iz jedne, dosljedne konfiguracijske datoteke. Singleton osigurava da se datoteka pročita samo jednom i da svi dijelovi aplikacije koriste iste postavke.
• Zapisivanje (Logging): Singleton logger može centralizirati sve aktivnosti zapisivanja, olakšavajući praćenje i analizu ponašanja aplikacije. To sprječava da više instanci logera istovremeno piše u istu datoteku, što bi potencijalno moglo uzrokovati oštećenje podataka.
• Skup veza s bazom podataka (Database Connection Pool): Singleton može upravljati skupom veza s bazom podataka, optimizirajući korištenje resursa i poboljšavajući performanse. Time se izbjegava trošak stvaranja novih veza za svaku interakciju s bazom podataka.

Prednosti

• Kontrolirani pristup jednoj instanci.
• Optimizacija resursa.
• Globalna točka pristupa.

Nedostaci

• Može otežati testiranje zbog globalnog stanja.
• Krši princip jedinstvene odgovornosti (Single Responsibility Principle) ako Singleton klasa radi više od upravljanja vlastitom instancom.

Observer obrazac

Observer obrazac definira ovisnost jedan-prema-više između objekata, tako da kada jedan objekt (subjekt) promijeni stanje, svi njegovi ovisnici (promatrači) budu obaviješteni i automatski ažurirani. Ovo je korisno za izgradnju slabo povezanih sustava gdje objekti mogu reagirati na promjene u drugim objektima bez da su čvrsto povezani s njima. Zamislite burzovni ticker koji ažurira sve svoje gledatelje kada se cijena dionice promijeni.

Implementacija

Ovdje je JavaScript implementacija Observer obrasca:

            
class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} received update: ${data}`);
  }
}

// Example Usage
const subject = new Subject();

const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify("New data available!");

subject.unsubscribe(observer2);

subject.notify("Another update!");

            

              
                Copy
              
            
          

Objašnjenje:

• Klasa Subject održava listu promatrača.
• Metoda subscribe() dodaje promatrača na listu.
• Metoda unsubscribe() uklanja promatrača s liste.
• Metoda notify() prolazi kroz promatrače i poziva njihovu metodu update() s relevantnim podacima.
• Klasa Observer definira metodu update(), koja se poziva kada se stanje subjekta promijeni.

Primjeri iz stvarnog svijeta

• Rukovanje događajima (Event Handling): Observer obrazac se široko koristi u sustavima za rukovanje događajima, kao što su događaji u pregledniku (npr. klik, prelazak mišem) i prilagođeni događaji u web aplikacijama. Klik na gumb (Subjekt) obavještava sve registrirane slušače događaja (Promatrače).
• Ažuriranja u stvarnom vremenu: U aplikacijama koje zahtijevaju ažuriranja u stvarnom vremenu, kao što su chat aplikacije ili burzovni tickeri, Observer obrazac se može koristiti za obavještavanje klijenata kada su dostupni novi podaci. Poslužitelj (Subjekt) obavještava sve povezane klijente (Promatrače) kada se primi nova poruka.
• Model-View-Controller (MVC): U MVC arhitekturama, Observer obrazac se koristi za obavještavanje pogleda (views) kada se model promijeni. Model (Subjekt) obavještava Pogled (Promatrač) kada se podaci ažuriraju.

Prednosti

• Slaba povezanost između subjekta i promatrača.
• Podrška za emitiranje komunikacije (broadcast).
• Dinamičan odnos između objekata.

Nedostaci

• Može dovesti do neočekivanih ažuriranja ako se ne upravlja pažljivo.
• Teško je pratiti tijek ažuriranja.

Factory obrazac

Factory obrazac pruža sučelje za stvaranje objekata u nadklasi, ali omogućuje podklasama da promijene tip objekata koji će biti stvoreni. To odvaja klijentski kod od specifičnih klasa koje se instanciraju, olakšavajući prebacivanje između različitih implementacija bez mijenjanja klijentskog koda. Razmotrite scenarij u kojem trebate stvoriti različite vrste vozila (automobile, kamione, motocikle) na temelju korisničkog unosa.

Implementacija

Ovdje je JavaScript implementacija Factory obrasca:

            
// Abstract Product
class Vehicle {
  constructor(model, year) {
    this.model = model;
    this.year = year;
  }

  getDescription() {
    return `This is a ${this.model} made in ${this.year}.`;
  }
}

// Concrete Products
class Car extends Vehicle {
  constructor(model, year) {
    super(model, year);
    this.type = "Car";
  }
}

class Truck extends Vehicle {
  constructor(model, year) {
    super(model, year);
    this.type = "Truck";
  }
  getDescription() {
      return `This is a ${this.type} ${this.model} made in ${this.year}. It's very strong!`;
  }
}

class Motorcycle extends Vehicle {
  constructor(model, year) {
    super(model, year);
    this.type = "Motorcycle";
  }
}

// Factory
class VehicleFactory {
  createVehicle(type, model, year) {
    switch (type) {
      case "car":
        return new Car(model, year);
      case "truck":
        return new Truck(model, year);
      case "motorcycle":
        return new Motorcycle(model, year);
      default:
        return null;
    }
  }
}

// Example Usage
const factory = new VehicleFactory();

const car = factory.createVehicle("car", "Toyota Camry", 2023);
const truck = factory.createVehicle("truck", "Ford F-150", 2022);
const motorcycle = factory.createVehicle("motorcycle", "Honda CBR", 2024);

console.log(car.getDescription()); // Output: This is a Toyota Camry made in 2023.
console.log(truck.getDescription()); // Output: This is a Truck Ford F-150 made in 2022. It's very strong!
console.log(motorcycle.getDescription()); // Output: This is a Honda CBR made in 2024.

            

              
                Copy
              
            
          

Objašnjenje:

• Klasa Vehicle je apstraktni proizvod koji definira zajedničko sučelje za sve tipove vozila.
• Klase Car, Truck i Motorcycle su konkretni proizvodi koji implementiraju sučelje Vehicle.
• Klasa VehicleFactory je tvornica koja stvara instance konkretnih proizvoda na temelju navedenog tipa.
• Metoda createVehicle() uzima tip, model i godinu kao argumente i vraća instancu odgovarajuće klase vozila.

Primjeri iz stvarnog svijeta

• UI okruženja (Frameworks): UI okruženja često koriste Factory obrazac za stvaranje različitih vrsta UI elemenata, kao što su gumbi, tekstualna polja i padajući izbornici. React, Vue i Angular biblioteke komponenata često koriste obrasce slične tvornici za instanciranje komponenata.
• Razvoj igara: U razvoju igara, Factory obrazac se može koristiti za stvaranje različitih vrsta objekata u igri, kao što su neprijatelji, oružja i pojačanja (power-ups). Tvornica bi se mogla koristiti za stvaranje različitih vrsta AI protivnika na temelju razine težine igre.
• Slojevi za pristup podacima (Data Access Layers): Factory obrazac se može koristiti za stvaranje različitih vrsta objekata za pristup podacima, kao što su veze s bazom podataka i API klijenti. Tvornica bi se mogla koristiti za stvaranje veza s različitim sustavima baza podataka (npr. MySQL, PostgreSQL, MongoDB).

Prednosti

• Odvajanje klijentskog koda od konkretnih klasa.
• Poboljšana organizacija i održivost koda.
• Fleksibilnost prebacivanja između različitih implementacija.

Nedostaci

• Može dodati složenost kodu.
• Može zahtijevati više početnog postavljanja.

Zaključak

Obrasci Singleton, Observer i Factory samo su neki od mnogih obrazaca dizajna dostupnih JavaScript programerima. Razumijevanjem i primjenom ovih obrazaca možete pisati čišći, održiviji i skalabilniji kod. Eksperimentirajte s ovim obrascima u vlastitim projektima i istražite druge obrasce dizajna kako biste dodatno unaprijedili svoje vještine razvoja softvera. Zapamtite da su obrasci dizajna alati koje treba koristiti razborito, i ne svaki problem zahtijeva rješenje u obliku obrasca dizajna. Odaberite pravi obrazac za pravu situaciju i uvijek težite kodu koji je jasan, sažet i lako razumljiv.

Kontinuirano učenje i prilagođavanje obrazaca dizajna u vašem razvojnom procesu značajno će podići kvalitetu vašeg koda i vašu sposobnost rješavanja složenih softverskih izazova na bilo kojem globalnom projektu.